<template>
  <div class="max-w-6xl mx-auto">
    <!-- 个人信息卡片 -->
    <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
      <div class="flex flex-col md:flex-row items-center md:items-start">
        <div class="relative">
          <div class="w-24 h-24 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center text-white text-3xl font-bold">
            张
          </div>
          <span class="absolute bottom-0 right-0 h-6 w-6 rounded-full bg-green-500 border-2 border-white"></span>
        </div>
        
        <div class="md:ml-6 mt-4 md:mt-0 text-center md:text-left">
          <h1 class="text-2xl font-bold">张三</h1>
          <p class="text-gray-600">zhangsan@example.com</p>
          <div class="flex flex-wrap justify-center md:justify-start gap-2 mt-3">
            <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">
              中级
            </span>
            <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm font-medium">
              连续学习7天
            </span>
            <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-medium">
              已解决127题
            </span>
          </div>
        </div>
        
        <div class="ml-auto mt-4 md:mt-0">
          <button class="flex items-center px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors">
            <Settings class="w-4 h-4 mr-2" />
            编辑资料
          </button>
        </div>
      </div>
    </div>
    
    <!-- 成就部分 -->
    <div class="mb-8">
      <h2 class="text-xl font-bold mb-4">我的成就</h2>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div 
          v-for="(achievement, index) in achievements"
          :key="index"
          :class="`p-4 rounded-lg ${
            achievement.unlocked
              ? 'bg-white shadow-sm border border-gray-100'
              : 'bg-gray-100 border border-gray-200'
          }`"
          @mouseenter="hoverIndex = index"
          @mouseleave="hoverIndex = -1"
          :style="{
            transform: hoverIndex === index ? 'translateY(-5px)' : 'none',
            transition: 'transform 0.3s ease'
          }"
        >
          <div class="flex flex-col items-center text-center">
            <div :class="`w-16 h-16 rounded-full flex items-center justify-center mb-3 ${
              achievement.unlocked ? 'bg-yellow-50' : 'bg-gray-200'
            }`">
              <component :is="achievement.icon" class="w-8 h-8" :class="achievement.iconColor" />
            </div>
            <h3 :class="`font-semibold ${achievement.unlocked ? 'text-gray-800' : 'text-gray-500'}`">
              {{ achievement.name }}
            </h3>
            <p :class="`text-xs mt-1 ${achievement.unlocked ? 'text-gray-600' : 'text-gray-500'}`">
              {{ achievement.description }}
            </p>
            <span 
              v-if="!achievement.unlocked"
              class="mt-2 text-xs px-2 py-1 bg-gray-200 text-gray-700 rounded-full"
            >
              未解锁
            </span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 设置部分 -->
    <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
      <h2 class="text-xl font-bold mb-4">设置</h2>
      
      <div class="space-y-6">
        <!-- 通知设置 -->
        <div>
          <h3 class="text-lg font-medium mb-3 flex items-center">
            <Bell class="w-4 h-4 mr-2 text-gray-500" />
            通知设置
          </h3>
          <div class="space-y-3 pl-7">
            <div 
              v-for="(item, index) in notificationSettings"
              :key="'notif-'+index"
              class="flex items-center"
            >
              <input
                type="checkbox"
                :id="'notif-'+index"
                v-model="item.enabled"
                class="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
              />
              <label :for="'notif-'+index" class="ml-2 text-gray-700">
                {{ item.label }}
              </label>
            </div>
          </div>
        </div>
        
        <!-- 账号设置 -->
        <div>
          <h3 class="text-lg font-medium mb-3 flex items-center">
            <Settings class="w-4 h-4 mr-2 text-gray-500" />
            账号设置
          </h3>
          <div class="space-y-4 pl-7">
            <div>
              <label for="email" class="block text-sm font-medium text-gray-700 mb-1">
                邮箱地址
              </label>
              <input
                type="email"
                id="email"
                v-model="accountSettings.email"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
            <div>
              <label for="password" class="block text-sm font-medium text-gray-700 mb-1">
                密码
              </label>
              <input
                type="password"
                id="password"
                v-model="accountSettings.password"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
            <div>
              <label for="language" class="block text-sm font-medium text-gray-700 mb-1">
                界面语言
              </label>
              <select
                id="language"
                v-model="accountSettings.language"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              >
                <option v-for="lang in languages" :key="lang" :value="lang">
                  {{ lang }}
                </option>
              </select>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 保存按钮 -->
      <div class="mt-8 flex justify-end">
        <button 
          @click="resetSettings"
          class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md mr-3 hover:bg-gray-300 transition-colors"
        >
          取消
        </button>
        <button 
          @click="saveSettings"
          class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
        >
          保存更改
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { 
  Settings, 
  Award, 
  Calendar, 
  Bell, 
  BookOpen, 
  BarChart2 
} from 'lucide-vue-next';

// 成就数据
const achievements = ref([
  {
    name: '快速思考者',
    description: '5题内每题用时不超过2分钟',
    icon: Award,
    iconColor: 'text-yellow-500',
    unlocked: true
  },
  {
    name: '数学爱好者',
    description: '完成5个不同类别的题目',
    icon: BookOpen,
    iconColor: 'text-blue-500',
    unlocked: true
  },
  {
    name: '持续学习者',
    description: '保持10天连续学习',
    icon: Calendar,
    iconColor: 'text-green-500',
    unlocked: false
  },
  {
    name: '数据大师',
    description: '正确解决10道统计题',
    icon: BarChart2,
    iconColor: 'text-purple-500',
    unlocked: false
  }
]);

// 悬停效果
const hoverIndex = ref(-1);

// 通知设置
const notificationSettings = ref([
  { label: '每日练习提醒', enabled: true },
  { label: '每周进度总结', enabled: true },
  { label: '新题目推荐', enabled: false },
  { label: '成就解锁通知', enabled: false }
]);

// 账号设置
const accountSettings = ref({
  email: 'zhangsan@example.com',
  password: '••••••••',
  language: '简体中文'
});

// 语言选项
const languages = ['简体中文', 'English', '日本語', '한국어'];

// 保存设置
const saveSettings = () => {
  alert('设置已保存');
  // 实际应用中这里可以调用API保存设置
};

// 重置设置
const resetSettings = () => {
  accountSettings.value = {
    email: 'zhangsan@example.com',
    password: '••••••••',
    language: '简体中文'
  };
  notificationSettings.value = [
    { label: '每日练习提醒', enabled: true },
    { label: '每周进度总结', enabled: true },
    { label: '新题目推荐', enabled: false },
    { label: '成就解锁通知', enabled: false }
  ];
};
</script>

<style scoped>
/* 添加自定义过渡效果 */
.achievement-card {
  transition: transform 0.3s ease;
}
</style>
